<?php
	include ('../config/validacao.php');
?>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"http://www.w3.org/TR/html4/strict.dtd">
<html lang="pt_BR">
<head>
	<meta charset="utf-8">
	<link rel="icon" type="image/png" href="../images/icone.png">
	<title><?php include('../titulo.php')?></title>
	<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
 	
	<link rel="stylesheet" href="../css/jquery-ui-1.8.21.custom.css" type="text/css" media="all" />
	<link rel="stylesheet" href="../css/index.css"  media="screen"> 
	<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"  media="screen"> 
	
	<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script> 
	<script type="text/javascript" src="../js/bootstrap-inputmask.js"/></script>
	
    <script type="text/javascript" src="../js/jquery.validate.min.js"></script> 
	<script type="text/javascript" language="javascript" >
		$(document).ready(function(){
			$('#form').validate({  
				rules: {  
					ramal: { required: true, remote: 'valida_ramal.php' },
					secretaria: { required: true}
				},  
				messages: {  
					ramal: { required: 'Preencha o campo', remote: ' Ramal jah existe!' },
					secretaria: {required:'Preencha o campo'}
				},  
				submitHandler: function( form ){  
					var dados = $( form ).serialize();  
					$.ajax({  
						type: "POST",  
						url: "c_ramal.php",  
						data: dados,  
						success: function( data )  
						{  
							alert( data );
							$("input[name='ramal']").val('');
							$("input[name='ramal']").focus();
						}  
					});  
	  				return false;  
				}  
			}); 
		}); 
	</script>
	<script type="text/javascript" charset="utf-8">
        $(function(){
          $("select#secretaria").change(function(){
                $.getJSON("../c_setor/seleciona_setor.php",{id: $(this).val(), ajax: 'true'}, function(j){
                  var options = '';
                  options += '<option value="0">Selecione um setor</option>';
                  for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                  }
                  $("select#setor").html(options);
                })
          })
        })
         $(function(){
          $("select#setor").change(function(){
                $.getJSON("../c_ramal/seleciona_ramal.php",{id: $(this).val(), ajax: 'true'}, function(j){
                  var options = '';
                  //options += '<option value="0"></option>';
                  for (var i = 0; i < j.length; i++) {
                        options += '<option value="' + j[i].optionValue + '">' + j[i].optionDisplay + '</option>';
                  }
                  $("select#ramal").html(options);
                })
          })
        })
        $(function(){
        	$("select#mascara").change(function(){
                  	var options = '<br>';
                	if($(this).val()== 1){
				 options += '<input class="input-medium" type="text" name="ramal" value="" data-mask="(99) 9999-9999"/>';
			}else{
				 options += '<input class="input-medium" type="text" name="ramal" value="" onkeypress="return SomenteNumero(event)"/>';
			}
                	 $("#ramal").html(options);
        	})
        
        })
	function SomenteNumero(e){
	    var tecla=(window.event)?event.keyCode:e.which;   
	    if((tecla==45 || tecla>47 && tecla<58)) return true;
	    else{
    		if (tecla==8 || tecla==0) return true;
		else  return false;
    		}
	}
	</script>	
</head>
<body>
	<div id="container">
		<div id="topo" style="text-align:left;position:absolute;">
			<?php include('../cabecalho.php') ?>
		</div>
		<br><br>
		<div id="body">
			<form id="form">
				<fieldset>
				<legend>Cadastro de Telefone</legend>
<!--				<label>Ramal</label>
				<input class="input-medium" type="text" name="ramal" value="" data-mask="(99) 9999-9999"/>-->
	<label>Local</label>
	<select id="secretaria" name="secretaria" class="span5">
	<option value="">SELECIONE LOCAL </option>
	<?php
		header ('Content-type: text/html; charset=UTF-8');
		include ('../config/conexao.php');

		$rs = mysql_query('SELECT idsecretaria, sigla, nomeSecretaria FROM secretaria
							ORDER BY sigla ASC');

		if ( $rs && mysql_num_rows($rs) )
		{
				while( $row = mysql_fetch_array($rs) )
				{
					echo '<option value='.$row["idsecretaria"].'>'.utf8_encode($row["sigla"]).' - '.utf8_encode($row["nomeSecretaria"]).'</option>';
				}
		}
	?>
	</select>
	<label>Setor</label>
	<select id="setor" name="setor" class="span4">
	<option value="">AGUARDE...</option>
	<?php
		$rs = mysql_query('SELECT idsetor, nomeSetor FROM setora ORDER BY nomeSetor ASC');
		if ( $rs && mysql_num_rows($rs) )
		{
			while( $row = mysql_fetch_array($rs) )
			{
				echo '<option value='.$row["idsetor"].'>'.utf8_encode($row["nomeSetor"]).'</option>';
			}
		}
	?>
	</select>
<!--			
				<label>Setor</label>
				<select name="setor" class="span6">
					<?php
/*						header ('Content-type: text/html; charset=UTF-8'); 
						include ('../config/conexao.php');
						 
						// query the database table for zip codes that match 'term'
						$rs = mysql_query('SELECT idsetor, sigla, nomeSetor FROM setor, secretaria
								WHERE  idsecretaria = secretaria_idsecretaria ORDER BY sigla ASC, nomeSetor ASC');

						// loop through each zipcode returned and format the response for jQuery
						$data = array();
						if ( $rs && mysql_num_rows($rs) )
						{
							while( $row = mysql_fetch_array($rs) )
							{
								//echo '<option value="'.$row["idsetor"].'">'.utf8_encode($row["sigla"]).' - '.utf8_encode($row["nomeSetor"]).'</option>';
								echo '<option value="'.$row["idsetor"].'">'.utf8_encode($row["nomeSetor"]).'</option>';
							}
						}
*/					?>
				</select>-->
 <label>Telefone</label>
<!--                            <input class="input-medium" type="text" name="ramal" value="" data-mask="(99) 9999-9999"/> -->

 	<select id="mascara" name="mascara" class="span2">
        	<!--<option value="">SELECIONE INPUT</option>-->
        	<option value="1">COM MASCARA</option>
        	<option value="0">SEM MASCARA</option>
       
        </select>

				<span id="ramal">
<br>
                            <input class="input-medium" type="text" name="ramal" value="" data-mask="(99) 9999-9999"/>
</span>
<br />
				<br>
				<label>Mostrar/Ocultar</label>
				<select name="ativo">
					<option value="0" SELECTED>Mostrar</option>
					<option value="1">Ocultar</option>
				</select>	
				<br>
				<button type="submit" class="btn">Cadastrar</button>
				</fieldset>
				</form>
		</div>
	</div>
</body>
</html>
